new Vue({
 el:'#main',
 data:{
   animeList:[],
   animeNewList:[],
   lunboList:[
    {imgSrc_F:'../public/img/index/anime/runner/kjedl.jpg',imgSrc:'../public/img/index/anime/runner/kjedl_s.jpg',content:'大树带阿淼回孤儿院',id:'kjedl'},
    {imgSrc_F:'../public/img/index/anime/runner/atsj.jpg',imgSrc:'../public/img/index/anime/runner/atsj_s.jpg',content:'无色雪原',id:'atsj'},
    {imgSrc_F:'../public/img/index/anime/runner/tlf.jpg',imgSrc:'../public/img/index/anime/runner/tlf_s.jpg',content:'夜王妃升迁记',id:'tlf'},
     {imgSrc_F:'../public/img/index/anime/runner/yc.jpg',imgSrc:'../public/img/index/anime/runner/yc_s.jpg',content:'做自己喜欢的事，快乐地活下去',id:'yc'},
     {imgSrc_F:'../public/img/index/anime/runner/dzyz.jpg',imgSrc:'../public/img/index/anime/runner/dzyz_s.jpg',content:'灾厄 降临',id:'dzyzcml'},
   ],
   
   musicSort:1,
   musicList:[],
   musicResult:[],
   musicResultTop:[],

   gameSort:1,
   gameList:[],
   gameResult:[],
   gameResultTop:[],

   newSort:1,
   newList:[],
   newResult:[],
   newResultTop:[],
   
   timer:null,
   checkIndex:0,
 },
 methods:{
   readFile(){
     this.$http.get('/moongoDB/animes').then(response =>{
       let res = response.body;
       if(res){
         this.animeList = res.filter(item=>item.area=='国创').reverse();
       }
     },response=>{
       console.log('请求数据失败！');  
     });

     this.$http.get('/moongoDB/musics').then(response =>{
      let res = response.body;
      if(res){
        this.musicList = res.filter(item=>item.area=='中文').reverse();
        this.sortMusic();
        this.sortMusicHot();
      }
    },response=>{
      console.log('请求数据失败！');  
    });

    this.$http.get('/moongoDB/games').then(response =>{
      let res = response.body;
      if(res){
        this.gameList = res.filter(item=>item.area=='国产').reverse();
        this.sortGame();
        this.sortGameHot();
      }
    },response=>{
      console.log('请求数据失败！');  
    });

     this.$http.get('/moongoDB/news').then(response =>{
      let res = response.body;
      if(res){
        this.newList = res.filter(item=>item.area=='国产');
        this.animeNewList = this.newList.filter(item=>item.title.indexOf('新番')!=-1);
        this.sortNew();
        this.sortNewHot();
      }
    },response=>{
      console.log('请求数据失败！');  
    });

     this.imgOnHover();
     this.runnerTimer();
   },

  // 轮播图hover事件
   imgOnHover(){
      setTimeout(() => {
        $('.imgUl_S .imgUl_Sg .imgUl_SgItem').hover((e)=>{
         $target = $(e.currentTarget);
         this.checkIndex = parseInt($target.attr('data-index'));
        },()=>{
        });

        $('.imgUl_S .imgUl_Sg .activeDiv').hover(()=>{
            clearInterval(this.timer);
         },()=>{
             this.runnerTimer();
         });
      }, 200);
   },
   // 轮播定时器
   runnerTimer(){
    clearInterval(this.timer);
    this.timer = setInterval(()=>{ 
      this.checkIndex >= 4 ? 
       this.checkIndex = 0 : this.checkIndex += 1;
    },5000)
   },

   // 全部动漫
   moreLatestAnime(){
    if($('#animeItem .addMoreBtn span').hasClass('i2')){
      $('.latestAnimeList').css('max-height','318px');
      $('#animeItem .addMoreBtn').html(`全部 <span class="i i1"></span>`);
    }else{
      $('.latestAnimeList').css('max-height','inherit');
      $('#animeItem .addMoreBtn').html(`收起 <span class="i i2"></span>`);
    }
   },

   sortMusic(){
     if(this.musicSort == 1){
      this.musicResult = this.musicList.concat().slice(0,15);
     }else if(this.musicSort == 2){
      this.musicResult = this.musicList.concat().sort(dateSortBy("year","month","day","title")).reverse().slice(0,15);
     }
   },
   sortMusicHot(){
    this.musicResultTop = this.musicList.concat().sort(valueSortBy("zValue","title")).reverse().slice(0,10);
   },
   sortGame(){
    if(this.gameSort == 1){
     this.gameResult = this.gameList.concat().slice(0,15);
    }else if(this.gameSort == 2){
     this.gameResult = this.gameList.concat().sort(dateSortBy("year","month","day","title")).reverse().slice(0,15);
    }
  },
  sortGameHot(){
   this.gameResultTop = this.gameList.concat().sort(valueSortBy("score","title")).reverse().slice(0,10);
  },
  sortNew(){
    if(this.newSort == 1){
     this.newResult = this.newList.concat().reverse().slice(0,15);
    }
  },
  sortNewHot(){
   this.newResultTop = this.newList.concat().sort(valueSortBy("readNum","name")).reverse().slice(0,10);
  },
   // 切换音乐排序
   musicSortClick(index){
    this.musicSort = index;
    this.sortMusic();
   }, 
   // 切换游戏排序
   gameSortClick(index){
    this.gameSort = index;
    this.sortGame();
   }, 


   toAnimeInfo(id){
     window.open(`/animeInfo?id=${id}`,'_blank');
   },
   toAnimeVideo(id,index){
    window.open(`/animeVideo?id=${id}&p=${index}`,'_blank');
   },
   toMusic(id){
    if(!id || id=="") return window.open(`/music`,'_blank');
    window.open(`/music?_id=${id}`,'_blank');
   },
   toGame(){
    window.open(`/game`,'_blank');
  },
   toGameInfo(id){
    window.open(`/gameInfo?_id=${id}`,'_blank');
  },
  toNew(){
    window.open(`/new`,'_blank');
  },
   toNewInfo(id){
    window.open(`/newInfo?_id=${id}`,'_blank');
   },

   toIndexClick(){
     window.location.href="/";
   },
  
 },

 created(){
   // 轮播
   $('.imgRunner .imgUl').html(`<div class="imgItem" v-for="item in lunboList">
     <img :src="item.imgSrc_F" alt="" @click="toAnimeInfo(item.id)">
    </div>`)

    $('.imgRunner .imgUl_Sg').prepend(`<div class="imgUl_SgItem" :data-index="index" v-for="(item,index) in lunboList">
    <img :src="item.imgSrc" alt="">
    </div>`)

    $('.imgRunner .info').prepend(`<span v-for="(item,index) in lunboList" style="display:none" :class="checkIndex == index ? 'show':''">
      <a :href="'/animeInfo?id=' + item.id" target="_blank">{{item.content}}</a>
    </span>`)

  // 新番资讯
   $('.newAnimeList').html(`<div class="newAnimeItem" v-for="item in animeNewList" @click="toNewInfo(item._id)">
   <div class="imgC">
     <img :src="item.imgSrc" alt="">
     <span class="bgTitle">2019年新番</span>
   </div>
   <div class="title" :title="item.title">{{item.title}}</div>
 </div>`)

  // 最近更新
  $('.latestAnimeList ul').html(`<div class="latestAnimeItem" v-for="item in animeList">
  <div class="imgC" @click="toAnimeVideo(item.id,1)">
    <img :src="item.imgSrc" alt="">
  </div>
  <div class="right">
    <div class="animeTitleC" @click="toAnimeVideo(item.id,1)">
      <span class="animeTitle">{{item.title}}</span>
    </div>
    <div class="animeUpdate">
       更新至 <span @click="toAnimeVideo(item.id,item.episodes.length)">{{item.episodes.length - item.start}}话</span>
    </div>
  </div>
</div>`)

  // 音乐
  $('#musicItem .list').html(`<div class="areaItem" v-for="item in musicResult">
  <div class="imgC">
    <div class="mask" @click="toMusic(item._id)">
      <a href="javascript:;">
        <span>{{item.time}}</span>
      </a>
    </div>
    <img :src="item.imgSrc" alt="">
  </div>
  <div class="content">
    <div class="title" @click="toMusic(item._id)" :title="item.title+' - '+item.singer">{{item.title}} - {{item.singer}}</div>
    <div class="others">
      <span class="date">{{item.year}}-{{item.month}}-{{item.day}}</span>
      <span class="music" :title="item.zValue">{{parseInt(item.zValue/10000)}}万</span>
    </div>
  </div>
</div>`)
  // 音乐热门
  $('#musicItem .topList').html(`<div :class="['topItem', index<=2 ? 'topMain':'']" v-for="(item,index) in musicResultTop">
  <span :class="['topNum', index<=2 ? 'bg_00a1d6':'']">{{index + 1}}</span>
  <div :class="['imgC',index>2 ? 'hide':'']">
    <img :src="item.imgSrc" alt="" @click="toMusic(item._id)">
  </div>
  <div class="contentTop">
    <div class="title" @click="toMusic(item._id)" :title="item.title+' - '+item.singer">{{item.title}} - {{item.singer}}</div>
    <div class="des" :title="item.zValue">综合评分：{{parseFloat(item.zValue/10000).toFixed(1)}}万</div>
  </div>
</div>
`)

// 游戏
$('#gameItem .list').html(`<div class="areaItem" v-for="item in gameResult">
<div class="imgC">
  <div class="mask" @click="toGameInfo(item._id)">
    <a href="javascript:;">
      <span>{{item.gameType}} - {{item.publisher}}</span>
    </a>
  </div>
  <img :src="item.imgUrl" alt="">
</div>
<div class="content">
  <div class="title" @click="toGameInfo(item._id)" :title="item.name">{{item.name}}</div>
  <div class="others">
    <span class="date">{{item.year}}-{{item.month}}-{{item.day}}</span>
    <span class="score">{{item.score}}</span>
  </div>
</div>
</div>`)
// 游戏热门
$('#gameItem .topList').html(`<div :class="['topItem', index<=2 ? 'topMain':'']" v-for="(item,index) in gameResultTop">
<span :class="['topNum', index<=2 ? 'bg_00a1d6':'']">{{index + 1}}</span>
<div :class="['imgC',index>2 ? 'hide':'']">
  <img :src="item.imgUrl" alt="" @click="toGameInfo(item._id)">
</div>
<div class="contentTop">
  <div class="title" @click="toGameInfo(item._id)" :title="item.name">{{item.name}}</div>
  <div class="des" >综合评分：{{item.score}}</div>
</div>
</div>
`)

// 资讯
$('#newItem .list').html(`<div class="areaItem" v-for="item in newResult">
<div class="imgC">
  <div class="mask" @click="toNewInfo(item._id)">
    <a href="javascript:;">
      <span>作者：{{item.writer}}</span>
    </a>
  </div>
  <img :src="item.imgSrc" alt="">
</div>
<div class="content">
  <div class="title" @click="toNewInfo(item._id)" :title="item.title">{{item.title}}</div>
  <div class="others">
    <span class="date">{{item.time.slice(0,10)}}</span>
    <span class="read">{{item.readNum}}</span>
  </div>
</div>
</div>`)
// 资讯热门
$('#newItem .topList').html(`<div :class="['topItem', index<=2 ? 'topMain':'']" v-for="(item,index) in newResultTop">
<span :class="['topNum', index<=2 ? 'bg_00a1d6':'']">{{index + 1}}</span>
<div :class="['imgC',index>2 ? 'hide':'']">
  <img :src="item.imgSrc" alt="" @click="toNewInfo(item._id)">
</div>
<div class="contentTop">
  <div class="title" @click="toNewInfo(item._id)" :title="item.title">{{item.title}}</div>
  <div class="des" >浏览次数：{{item.readNum}}</div>
</div>
</div>
`)

   this.readFile();  
   
 },
 updated(){   

 },
 
});